/*
public.html的css
 */
*{
    margin: 0;
    padding: 0;
}
.publicbody{
    background: #4287c2;
}
.header{
    background: linear-gradient(to bottom,#60acf0,#64a5df,#62a0dd,#5994d6,#4f8ace,#4880ca);
    background:-webkit-linear-gradient(to bottom,#60acf0,#64a5df,#62a0dd,#5994d6,#4f8ace,#4880ca);
    background:-moz-linear-gradient(to bottom,#60acf0,#64a5df,#62a0dd,#5994d6,#4f8ace,#4880ca);
    background:-ms-linear-gradient(to bottom,#60acf0,#64a5df,#62a0dd,#5994d6,#4f8ace,#4880ca);}
.header h1{

    color: #fff;
    font-size: 40px;
    padding-left:80px;
    margin-left: 300px;
    text-shadow: 2px 1px #000;

}

.header .p1{

    color: #fff;
    font-size: 30px;
    margin-left: 800px;
    text-shadow: 2px 1px #000;
    font-family: 'Times New Roman', Times, serif;
}

.header .p2{

    color: yellow;
    font-size: 20px;
    padding-left:500px;
    margin-left: 300px;
    text-shadow: 2px 1px #000;
    font-family: 'Times New Roman', Times, serif;
}

.header a{

    margin-left: 800px;
    width: 50px;
    height: 28px;
    display: inline-block;
    border: 1px solid #679e43;
    background: linear-gradient(to bottom,#baf076,#a2d866,#9cd055,#8dc838,#8bc93a);
    line-height: 28px;
    text-align: center;
    border-radius: 4px;
    font-weight: bold;
    color: #fff;
}

.header a:hover,.header a:active{
    border: 1px solid #192b02;
    border-radius: 4px;
    font-weight: bold;
    background: linear-gradient(to bottom,#70b21c,#5c9613,#47740e,#3b6209,#2b4906);
}

.public_main{

    border-top: 1px solid #c2ccd5;
    display: flex;  /*变为弹性盒模型：是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。*/
    display: -webkit-flex;
    background: #fff;

}

.left{
    width: 168px;
    margin-right: 10px;
    margin-left: 10px;
    /*height: 520px;*/
    height: 500px;
    background: url("../img/leftBg.png");
}
/* border 简写属性在一个声明设置所有的边框属性。

可以按顺序设置如下属性：
border-width	规定边框的宽度。
border-style	规定边框的样式
border-color	规定边框的颜色。
inherit	规定应该从父元素继承 border 属性的设置。
*/
.div1 {

    margin-top: 10px;
    margin-bottom: 10px;

}

.div1 h2{

    /* radial-gradient 径向渐变 */
    background: radial-gradient(#70c2f4,#3a8dc1, #4696c7,#83d1f5) ;
    border-radius: 5px;
    border: 1px solid black;

}

.div1 ul li:nth-child(1){

    margin-top: 10px;
    margin-bottom: 10px;

}

.div1 ul li:nth-child(2){

    margin-top: 10px;
    margin-bottom: 10px;

}

.div2 {

    margin-top: 10px;
    margin-bottom: 10px;

}
.div2 h2{

    background: radial-gradient(#70c2f4,#3a8dc1, #4696c7,#83d1f5) ;
    border-radius: 5px;
    border: 1px solid black;

}

.div2 ul li:nth-child(1){

    margin-top: 10px;
    margin-bottom: 10px;

}

.div2 ul li:nth-child(2){

    margin-top: 10px;
    margin-bottom: 10px;

}

.div2 ul li:nth-child(3){

    margin-top: 10px;
    margin-bottom: 10px;

}

.div3 {

    margin-top: 10px;
    margin-bottom: 10px;

}
.div3 h2{

    background: radial-gradient(#70c2f4,#3a8dc1, #4696c7,#83d1f5) ;
    border-radius: 5px;
    border: 1px solid black;

}

.div3 li:nth-child(1){

    margin-top: 10px;
    margin-bottom: 10px;

}

.div3 ul li:nth-child(2){

    margin-top: 10px;
    margin-bottom: 10px;

}

.div3 ul li:nth-child(3){

    margin-top: 10px;
    margin-bottom: 10px;

}

.div3 ul li:nth-child(4){

    margin-top: 10px;
    margin-bottom: 10px;

}

.div3 h2{

    background: radial-gradient(#70c2f4,#3a8dc1, #4696c7,#83d1f5) ;
    border-radius: 5px;
    border: 1px solid black;

}

.div4 {

    margin-top: 10px;
    margin-bottom: 10px;

}

.div4 ul li:nth-child(1){

    margin-top: 10px;
    margin-bottom: 10px;

}
